<template>
  <section>
    <quill-editor v-model="content"
                  ref="myQuillEditor"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus"
                  @ready="onEditorReady($event)">
    </quill-editor>
    <div style="height: 200px;"></div>
    <h1 v-text="text"></h1>
    <div v-for="item in list">
      <el-checkbox v-model="form[item.id]" true-label="1" false-label="2">{{item.type}}</el-checkbox>
    </div>
    <a href="#" target="view-dsa">dasd</a>
    <div>
      <input type="text" placeholder="Text input" @focus="show" data-layout="normal"/>
      <vue-touch-keyboard v-if="visible"  :layout="layout"  :cancel="hide"  :accept="accept"  :input="input"/>
    </div>

    <el-checkbox-group v-for="(item,index) in numList" @change="change(item)" :key="index" v-model="item.numArr" size="mini">
      <!--<el-checkbox-button v-for="city in cities"  :label="city" :key="city">{{city}}</el-checkbox-button>-->
      <el-checkbox-button v-for="city in item.num"  :label="city" :key="city">{{city}}</el-checkbox-button>
    </el-checkbox-group>
  </section>
</template>
<script>
  const cityOptions = ['01', '02', '03', '04']
  export default {
    data: function () {
      return {
        text: '',
        index: 0,
        form: {},
        list: [
          {
            type: '五星玩法',
            id: 1
          },
          {
            type: '四星玩法',
            id: 2
          },
          {
            type: '直选',
            id: 3
          },
          {
            type: '二星玩法',
            id: 4
          }
        ],
        visible: false,
        layout: 'normal',
        input: null,
        options: {
          useKbEvents: false
        },
        content: '<h2>i am examole</h2>',
        editorOption: {},
        checkboxGroup4: [],
        cities: cityOptions,
        numList: [
          {
            id: 1,
            num: [1, 2, 3, 4],
            numArr: []
          }
        ]
      }
    },
    created () {
      // this.text = this.leftTimer(2017, 11, 9, 19, 11, 11)
      setInterval(() => {
        this.leftTimer(2017, 11, 9, 19, 11, 11)
      }, 1000)
    },
    methods: {
      leftTimer (year, month, day, hour, minute, second) {
        // 计算剩余的毫秒数
        let leftTime = (new Date(year, month - 1, day, hour, minute, second)) - (new Date())
        // 计算剩余的天数
        let days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10)
        // 计算剩余的小时
        let hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10)
        // 计算剩余的分钟
        let minutes = parseInt(leftTime / 1000 / 60 % 60, 10)
        // 计算剩余的秒数
        let seconds = parseInt(leftTime / 1000 % 60, 10)
        days = this.checkTime(days)
        hours = this.checkTime(hours)
        minutes = this.checkTime(minutes)
        seconds = this.checkTime(seconds)
        this.text = days + '天' + hours + '小时' + minutes + '分' + seconds + '秒'
      },
      checkTime (i) {
        if (i < 10) {
          i = '0' + i
        }
        return i
      },
      accept (text) {
        alert('Input text: ' + text)
        this.hide()
      },
      show (e) {
        this.input = e.target
        this.layout = e.target.dataset.layout
        if (!this.visible) {
          this.visible = true
        }
      },
      hide () {
        this.visible = false
      },
      onEditorBlur (editor) {
        console.log('editor blur!', editor)
      },
      onEditorFocus (editor) {
        console.log('editor focus!', editor)
        console.log(this.content)
      },
      onEditorReady (editor) {
        console.log('editor ready!', editor)
      },
      onEditorChange ({ editor, html, text }) {
        console.log('editor change!', editor, html, text)
        this.content = html
      },
      change (val, e) {
        console.log(val.numArr)
      }
    }
  }
</script>

<style>
  .el-checkbox-button .el-checkbox-button__inner{
      border-radius:50%!important;
    padding: 10px;
    margin-right: 20px;
    border:1px solid #ccc;
  }
</style>
